<template>
  <view class="videos_all" :style="{ height: videoHeight + 'px' }">
    <view class="video_top" :style="{ paddingTop: navHeight + 'px' }">
      <image
        @click="goback()"
        class="video_back"
        src="http://llg.qiniu.comeinvip.com/images/navbar/return_icon_white.png"
      ></image>
    </view>
    <view
      class="videos_con"
      :style="{ height: videoHeight - 60 + 'px' }"
      v-if="basicCon"
    >
      <video
        v-if="basicCon.drama_video[0]"
        id="myVideo"
        class="video_img"
        :style="{ height: videoHeight - 40 + 'px' }"
        :autoplay="autoplay"
        :controls="controls"
        :objectFit="objectFit"
        :loop="loop"
        :src="basicCon.drama_video[0]"
        @error="videoErrorCallback"
        @play="isPlay"
        @pause="isPause"
        @timeupdate="videoUpdate"
        @ended="videoEnded"
        @loadedmetadata="loadedmetadata"
        @fullscreenchange="fullscreenchange"
      >
        <!-- 自定义控制条 全屏状态下不显示 -->
        <view class="process-container" v-if="!isAllSee">
          <!-- 播放/暂停 -->
          <view
            class="video-controls-play"
            :class="{ new_bg: isShowIcon }"
            @tap.stop="videoOpreation"
          >
            <image
              :class="{ new_stop: !isShowIcon }"
              :src="videoIsPaly ? shouc : wshouc"
              class="video-controls-icon"
            />
          </view>
          <!-- 全屏播放按钮 -->
          <view
            class="allSee"
            :style="{ marginTop: allSeeTop }"
            v-if="isShowAll"
            @tap.stop="videoAllscreen"
          >
            <image
              class="allSee_icon"
              :src="videoIsPalyAll ? shouc : wshouc"
            ></image>
            <span>全屏观看</span>
          </view>
          <!-- 展开详情 -->
          <view class="videoInfor_ZK_bg" v-if="isZk" @tap="isZk = !isZk"></view>
          <view
            class="videoInfor_ZK"
            :class="{ videoInfor_ZK_GD: isZk }"
            v-if="isZk"
          >
          </view>
          <!-- 播放时间 -->
          <!-- <view class="currtime">{{currtime}} / {{druationTime}}</view> -->
          <!-- 控制条+滑块 -->
          <view class="slider-container">
            <slider
              class="isSlider"
              step="1"
              backgroundColor="#9f9587"
              activeColor="#d6d2cc"
              block-color="#FFFFFF"
              block-size="12"
              min="0"
              :max="videoTime"
              :value="sliderValue"
              @change="sliderChange"
              @changing="sliderChanging"
            />
          </view>
        </view>
      </video>

      <image
        v-else
        class="video_img"
        :style="{ height: videoHeight - 50 + 'px' }"
        src="http://llg.qiniu.comeinvip.com/images/video_img.jpg"
      ></image>

      <view class="newvideos_function">
        <view class="vd_fun01">
          <image src="http://llg.qiniu.comeinvip.com/images/vzan.png"></image>
          <text>0</text>
        </view>
        <view class="vd_fun01">
          <image
            src="http://llg.qiniu.comeinvip.com/images/vcolect.png"
          ></image>
          <text>收藏</text>
        </view>
        <view class="vd_fun01">
          <image src="http://llg.qiniu.comeinvip.com/images/vshare.png"></image>
          <button
            style="
              border: none;
              background-color: transparent;
              font-size: 24rpx;
              color: #fff;
              margin: 0;
              padding: 0;
              width: 100rpx;
            "
            open-type="share"
          >
            转发
          </button>
        </view>
      </view>
      <view class="videos_photo">
        <image :src="basicCon.icon[0]"></image>
        <text>{{ basicCon.name }}</text>
      </view>
    </view>
    <view
      v-else
      class="videos_con"
      :style="{ height: videoHeight - 50 + 'px' }"
    >
      <text style="margin-top: 200rpx" class="video_nodata">暂无数据~</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoHeight: 500,
      navHeight: uni.getSystemInfoSync()["statusBarHeight"],
      basicCon: [], //获取到的基本信息
      danmuList: [
        {
          text: "第 1s 出现的弹幕",
          color: "#ff0000",
          time: 1,
        },
        {
          text: "第 3s 出现的弹幕",
          color: "#ff00ff",
          time: 3,
        },
      ],
      danmuValue: "",
      videoContext: undefined, //video上下文
      viedeoWidth: "", //视频宽度
      viedeoHeight: "", //视频高度
      videoTime: "", //视频总时长
      sliderValue: 0, //控制进度条slider的值，
      currtime: "00:00", //当前播放时间 -计算后
      druationTime: "00:00", //总时间 -计算后
      controls: false, //是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
      objectFit: "contain", //视频与容器大显示模式 包含contain 填充fill 覆盖cover
      loop: false, //是否循环播放
      autoplay: true, //是否自动播放
      isShowIcon: false, //播放图标状态 false不显示图标 true显示图标
      videoIsPaly: false, //播放状态 false播放 true暂停
      videoIsPalyAll: false, //是否全屏播放
      allSeeTop: "", //和视频的距离
      isAllSee: false, //是否进入来全屏模式
      isShowAll: false, //是否显示全屏按钮
      isZk: false, //展开详情
    };
  },
  methods: {
    videoErrorCallback(error) {
      console.log("视频播放失败", error);
    },
    goback() {
      uni.navigateBack();
    },
    //点击开始-暂停播放
    videoOpreation() {
      this.videoIsPaly ? this.contrPlay() : this.pause();
    },
    //点击继续播放执行play事件，并修改图标
    contrPlay() {
      this.videoContext.play();
      this.videoIsPaly = false;
    },
    //点击暂停播放执行pause事件，并修改图标
    pause() {
      this.videoContext.pause();
      this.videoIsPaly = true;
    },
    //点击进入全屏
    videoAllscreen() {
      this.videoIsPalyAll
        ? this.videoContext.exitFullScreen()
        : this.videoContext.requestFullScreen();
    },
    //视频加载完成 时触发 （获取video元数据）
    loadedmetadata(event) {
      let viedeoWidth = event.detail.width; //视频宽度
      this.viedeoWidth = viedeoWidth;
      let viedeoHeight = event.detail.height; //视频高度
      this.viedeoHeight = viedeoHeight;
      let videoTime = event.detail.duration; //视频总时间
      this.videoTime = videoTime;
      //获取当前屏幕宽度
      let windowWidth = uni.getStorageSync("windowWidth");
      //如果视频宽高比>1才显示全屏按钮
      // if (viedeoWidth / viedeoHeight > 1) {
      // 	this.isShowAll = true
      // } else {
      // 	this.isShowAll = false
      // }
      //计算 全屏按钮 显示位置
      this.allSeeTop =
        (viedeoHeight * windowWidth) / viedeoWidth / 2 + 30 + "px";
    },
    //播放状态 时触发
    isPlay(event) {
      //开始播放状态，会在1秒后隐藏暂停播放图标（css）
      this.isShowIcon = false;
    },
    //暂停状态 时触发
    isPause(event) {
      //暂停播放状态 ，会显示开始播放图标
      this.isShowIcon = true;
    },
    //当视频进入和退出全屏 时触发
    fullscreenchange(event) {
      if (event.detail.fullScreen == true) {
        this.videoIsPalyAll = true;
        //是否进入来全屏模式
        this.isAllSee = true;
        //显示默认播放控件
        this.controls = true;
      } else {
        this.videoIsPalyAll = false;
        //是否进入来全屏模式
        this.isAllSee = false;
        //显示自定义播放控件
        this.controls = false;
      }
    },
    //播放进度变化 时触发 （触发频率 250ms 一次）
    videoUpdate(event) {
      //进度条 绑定视频播放进度
      let duration = this.videoTime;
      let sliderValue = (event.detail.currentTime / duration) * 100;
      let second = (sliderValue / 100) * duration;
      this.sliderValue = second;
      //视频总时长
      this.druationTime = this.formatSeconds(duration);
      //视频当前播放时长
      this.currtime = this.formatSeconds(second);
    },
    //播放完 时触发 （跳转到视频开始，这里要禁止循环播放）
    videoEnded(event) {
      this.videoIsPaly = true; //显示暂停图标
      this.isShowIcon = true; //不一秒后隐藏图标
      this.sliderValue = 0; //进度条跳到最开始位置
      this.videoContext.seek(0); //视频跳到最开始位置
    },
    //在拖拽 时触发
    sliderChanging(event) {},
    //拖拽完成 时触发
    sliderChange(event) {
      (this.sliderValue = event.detail.value),
        //跳到视频指定位置
        this.videoContext.seek(event.detail.value);
    },
    //时间格式  秒 -》时:分:秒
    formatSeconds(a) {
      let hh = parseInt(a / 3600);
      let mm = parseInt((a - hh * 3600) / 60);
      if (mm < 10) mm = "0" + mm;
      let ss = parseInt((a - hh * 3600) % 60);
      if (ss < 10) ss = "0" + ss;
      if (hh < 10) hh = hh == 0 ? "" : `0${hh}:`;
      let length = hh + mm + ":" + ss;
      if (a >= 0) {
        return length;
      } else {
        return "00:00";
      }
    },
  },
  onLoad(options) {
    let vdHeight = uni.getSystemInfoSync().windowHeight;
    this.videoHeight = vdHeight;

    if (options.con) {
      let newcon = JSON.parse(options.con);
      this.basicCon = newcon;
    }

    //获取video上下文
    this.videoContext = uni.createVideoContext("myVideo", this);
  },
};
</script>

<style lang="less">
@import url(@/static/css/contents.css);

.video_nodata {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  color: #999;
  font-size: 28rpx;
}

.process-container {
  width: 100%;
  height: 300rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 13;
  display: flex;
  align-items: center;

  .video-controls-play {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .new_stop {
      animation: anHideToast4 2s both;
    }

    > image {
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      text-align: center;
    }
  }

  .new_bg {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .currtime {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 168rpx;
    z-index: 18;
    color: #ffffff;
    font-size: 22rpx;
    line-height: 60rpx;
    text-align: center;
  }

  .videoInfor_ZK_bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 29;
  }

  .videoInfor_ZK_GD {
    animation: anShowToast3 0.5s both;
  }

  .videoInfor_ZK {
    position: fixed;
    bottom: 0;
    z-index: 30;
    width: 100%;
    height: 700rpx;
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding-bottom: 60rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .slider-container {
    width: 100%;
    height: 50rpx;
    z-index: 19;
    position: absolute;
    left: 0;
    bottom: 55rpx;

    .isSlider {
      margin-top: 0 !important;
    }
  }

  .goods {
    width: 100%;
    height: auto;
    padding: 20rpx 36rpx;
    padding-bottom: 50rpx;
    box-sizing: border-box;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;

    .goodsInfor {
      width: 538rpx;
      height: auto;
      padding: 16rpx 24rpx;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.24);
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      > view:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 2rpx solid #707070;

        > image {
          width: 48rpx;
          border-radius: 8rpx;
          overflow: hidden;
          margin-right: 16rpx;
        }
      }

      > view:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 16rpx;

        > view {
          line-height: 34rpx;
          font-size: 24rpx;
          color: #ffffff;
        }

        > view:first-child {
          width: 400rpx;
          height: auto;
          display: -webkit-inline-box;
          overflow: hidden;
          /*超出隐藏*/
          text-overflow: ellipsis;
          /*隐藏后添加省略号*/
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; //想显示多少行
        }
      }
    }

    .goodsSc {
      display: flex;
      align-items: center;
      justify-content: center;

      > image {
        width: 48rpx;
        margin-right: 16rpx;
      }

      > span {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }

  .allSee {
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    border-radius: 100rpx;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    justify-content: center;

    .allSee_icon {
      display: inline-block;
      width: 30rpx;
      height: 30rpx;
      text-align: center;
    }

    > span {
      color: #ffffff;
      margin-left: 10rpx;
      font-size: 24rpx;
    }
  }
}
</style>
